import Base from "../base.js";
import SchedulesApi from "../../api/schedules.js";




export default class extends Base {
    form = layui.form;
    // 设置初始数据
    data = {
        curPage: 1,
        eachPage: 10,
        total: 0,
        maxPage: 0,
        rows: [],
        movieData: [],
        findMovieInput: `all`,
    }
    // 渲染页面框架
    render() {
        this.$el.html(`
            <div style="display:flex;justify-content:space-between;align-items: center;">
                <h1 style="margin:20px 0px 20px 50px">排片页面</h1>
                <form class="layui-form" action="">
                    <label class="layui-form-label">电影：</label>
                    <div class="layui-input-inline">
                        <select name="searchType" lay-filter="searchType">
                            
                        </select>
                    </div>
                    <button type="button" class="layui-btn" name="find-btn">查询</button>
                </form>
            </div>
            <table  class="layui-table schedulesTab">
                <thead>
                    <tr>
                        <th>影院</th>
                        <th>电影</th>
                        <th>放映厅</th>
                        <th>放映时间</th>
                        <th>价格</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody class="schedules-list"></tbody>
            </table>

            <section style="display:flex; ">
                <div class="layui-btn-container" style="margin-left:50px;">
                    <button type="button" class="first-btn layui-btn layui-btn-primary layui-btn-radius layui-btn-sm">首页</button>
                    <button type="button" class="prev-btn layui-btn layui-btn-primary layui-btn-radius layui-btn-sm">上一页</button>
                    <button type="button" class="next-btn layui-btn layui-btn-primary layui-btn-radius layui-btn-sm">下一页</button>
                    <button type="button" class="last-btn layui-btn layui-btn-primary layui-btn-radius layui-btn-sm">尾页</button>
                </div>
                <div style="margin-left:20px;color:gray;">
                    当前页：<select class="curPage" style="padding:4px;border:1px solid #d2d2d2;"></select>
                    每页显示条数：<input type="text" name="eachPage" style="width:30px; height:20px;border:1px solid #d2d2d2;"/>
                    总条数：<span class="total"></span>
                </div>
            </section>

        `)

        // 获取按钮
        this.$schedulesList = $(".schedules-list");
        this.$curPageEle = $(".curPage");
        this.$eachPageEle = $("input[name=eachPage]");
        this.$totalEle = $(".total");
        this.$firstBtnlEle = $(".first-btn");
        this.$prevBtnlEle = $(".prev-btn");
        this.$nextBtnlEle = $(".next-btn");
        this.$lastBtnlEle = $(".last-btn");
        this.$schedulesTab = $(".schedulesTab");
        this.$findBtnEle = $("button[name=find-btn]");
        this.$searchType = $("select[name='searchType']");
    };

    changeCurpage() {
        this.data.curPage = ~~this.$curPageEle.val();
        this.getSchedules();
    }
    changeEachPage() {
        this.data.eachPage = this.$eachPageEle.val();
        this.getSchedules();
    }
    first() {
        if (this.data.curPage == 1) return;
        this.data.curPage = 1;
        this.getSchedules();
    }
    last() {
        if (this.data.curPage == this.data.maxPage) return;
        this.data.curPage = this.data.maxPage;
        this.getSchedules();
    }
    next() {
        if (this.data.curPage == this.data.maxPage) return;
        this.data.curPage++;
        this.getSchedules();
    }
    prev() {
        if (this.data.curPage == 1) return;
        this.data.curPage--;
        this.getSchedules();
    }
    // 操作栏按钮事件
    async options(e) {
        // 根据给table添加事件委托判断点击的按钮
        if (e.target.innerText == "删除") {
            layer.confirm(`是否确定删除？`, async (index) => {
                const _id = e.target.dataset.index;
                await SchedulesApi.removeSchedules(_id); //获取点击获取的排片id传到后台对应的排片的数据
                this.layer.msg(`删除成功`, { icon: 1 })
                layer.close(index); //关闭layui.confirm弹出层
                this.getSchedules();  //重新渲染排片列表
            })
        } else if (e.target.innerText == "查看座位") {
            const _id = e.target.dataset.index;
            location.hash = `#/info/chooseSeat/${_id}`; //获取排片id，传值到选座页面
        }
    }

    // // 查询影院按钮
    async findMovie() {
        // 查找全部的值为all
        if (this.data.findMovieInput == "all") {
            // 传当前页数据
            const { curPage, eachPage } = this.data;
            const data = await SchedulesApi.getSchedulesData({ curPage, eachPage });
            
            // 合并数据
            Object.assign(this.data, data);
            this.rerender();
        } else {
            // 通过选择的电影id查询排片中的存在电影id数据
            const _id = this.data.findMovieInput;
            this.data.rows = await SchedulesApi.findMovie(_id);
            this.rerender();
        }
    }

    // 下拉按钮添加chagne是事件
    formChange() {
        this.form.on("select(searchType)", () => {
            const data = this.$searchType.next().children().eq(1).children();
            const result = [...data].filter(item => $(item).attr("class") == "layui-this");
            this.data.findMovieInput = $(result).attr("lay-value");
        })
    }

    handle() {
        // 分页绑定事件
        this.$curPageEle.on("change", this.changeCurpage.bind(this));
        this.$eachPageEle.on("blur", this.changeEachPage.bind(this));
        this.$firstBtnlEle.on("click", this.first.bind(this));
        this.$lastBtnlEle.on("click", this.last.bind(this));
        this.$nextBtnlEle.on("click", this.next.bind(this));
        this.$prevBtnlEle.on("click", this.prev.bind(this));
        this.$schedulesTab.on("click", this.options.bind(this));
        this.$findBtnEle.on("click", this.findMovie.bind(this));
        this.formChange();
    }


    rerender() {
        // console.log(this.data.rows);
        // 当页数据渲染
        const str = this.data.rows.map((item, index) => {
            return `
                <tr>
                    <td>${item.cinemasId?.name}</td>
                    <td>${item.movieId?.name}</td>
                    <td>${item.theaterId?.theatersName}</td>
                    <td>${item.showTime}</td>
                    <td>${item.price}</td>
                    <td>
                        <button class="layui-btn layui-btn-xs layui-btn-green seat-btn" data-index="${item._id}">查看座位</button>
                        <button class="layui-btn layui-btn-xs layui-btn-danger remove-btn" data-index="${item._id}">删除</button>
                    </td>
                </tr>
            `
        });
        // 将数据渲染到表格
        this.$schedulesList.html(str);
        // 添加分页数据
        let options = ``;
        for (let i = 1; i <= this.data.maxPage; i++) {
            options += `<option value="${i}">${i}</option>`
        }
        this.$curPageEle.html(options).val(this.data.curPage);
        this.$eachPageEle.val(this.data.eachPage);
        this.$totalEle.html(this.data.total);
    }

    // 获取数据并重新渲染
    async getSchedules() {
        const { curPage, eachPage } = this.data;
        // 获取排片数据
        const data = await SchedulesApi.getSchedulesData({ curPage, eachPage });
        // 合并返回的数据
        Object.assign(this.data, data);
        this.rerender();
    }
    // 获取所有电影
    async getMovie() {
        this.data.movieData = await SchedulesApi.getMovie();
        // 添加搜索影院下拉框选项
        this.$searchType.html(`
                <option value="all">全部电影</option>
                ${_.map(this.data.movieData, v => {
            return `<option value="${v._id}">${v.name}</option>`
        }).join("")}
            `);
        this.form.render();

    }

    mounted() {
        this.getMovie();
        this.getSchedules();
    }
}


